<template>
  <div class="box">
    <!-- 头部头标区域 -->
    <head-page
      title="消 息"
      id="backstyle"
      style="border-bottom: 2px solid #dad9df"
    >
    </head-page>
    <!-- 标题区域 -->
    <div class="xiao title-center" v-if="datatype != 'Array'">
      <div class="left">
        <div class="yuan"></div>
      </div>
      <div class="zhong">
        {{ $route.query.title }}
      </div>
    </div>
    <!-- 版心区域 -->
    <!-- 内容区域 -->
    <div v-if="datatype == 'Array'" class="war bold-size">
      <van-swipe
        class="my-swipe Banner"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          class="rel"
          v-for="(item, index) in bannerList"
          :key="index"
        >
          <img :src="imgurl + item" alt="" v-if="fileType(item) == 'image'" />
          <div class="rel" v-else>
            <div class="mask fcc" @click="playVideo(item)">
              <van-icon name="play-circle-o" size="42" color="#fff" />
            </div>
            <video :src="imgurl + item"></video>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="war welfare">
        <div class="area-center title-center">
          <div class="xiao">
            <div class="left">
              <div class="yuan"></div>
            </div>
            <div class="zhong">
              {{ $route.query.title }}
            </div>
          </div>
          <div class="m-t-07" v-for="(item, i) in list" :key="i">
            <div @click="messageDetails(item, i + 1)">
              {{ i + 1 }}. {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="context richText p-10" v-html="list"></div>

    <van-dialog
      v-model="show"
      @closed="closeVideo"
      :showConfirmButton="false"
      closeOnClickOverlay
    >
      <div class="preview">
        <video
          class="video"
          id="my-video"
          autoplay
          x5-video-orientation="landscape"
          preload="auto"
          :src="posterUrl"
          controls="controls"
        ></video>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { messageTitle, getMessageBanner } from "@/api/index";
export default {
  data() {
    return {
      list: "",
      title: "",
      datatype: "",
      bannerList: [],
      show: false,
      posterUrl: "",
    };
  },
  mounted() {
    // 获取banner
    getMessageBanner({
      id: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.bannerList = this.splitImg(res.data.data.messageUrl);
      }
    });
    // 获取详情
    messageTitle({
      messageId: this.$route.query.id,
    }).then((res) => {
      if (res.data.code == 200) {
        this.datatype = this.getRawType(res.data.data);
        this.list = res.data.data;
        if (this.datatype == "Object") {
          this.title = res.data.data.messageTitle;
          this.list = this.dataHTML(res.data.data.messageContent);
        }
      }
    });
  },
  methods: {
    fileType(val) {
      let type = [".png", ".jpg", ".jepg", ".svg"];
      let valType = /\.[^\.]+$/.exec(val);
      if (type.includes(valType[0])) {
        return "image";
      } else {
        return "video";
      }
    },
    closeVideo() {
      document.getElementById("my-video").pause();
      this.show = false;
    },
    playVideo(item) {
      // console.log(411)
      this.posterUrl = this.imgurl + item;
      this.show = true;
      // document.getElementById('my-video').play()
    },
    //进入详情
    messageDetails(item, index) {
      this.$router.push({
        path: "/messagdetails",
        query: { id: item.id, index, name: item.name },
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 轮播图 */
.Banner {
  position: sticky;
  top: 0.37rem;
  z-index: 999;
}
.xiao {
  width: 90%;
  display: flex;
}
/* 左边区域 */
.left {
  width: 0.1rem;
  /* padding-left: 0.1rem; */
}
.yuan {
  width: 0.18rem;
  height: 0.18rem;
  border-radius: 50%;
  background-color: black;
  margin-top: 0.09rem;
}

/* .bold-size  */
/* 中间区域 */
.zhong {
  width: 95%;
  height: 100%;
  line-height: 0.33rem;
  padding-left: 0.15rem;
}
/* 版心区域 */
.center {
  width: 100%;
  height: 100%;
}
/* 内容区域 */
.context {
  margin-top: 0.05rem;
}
.context img {
  max-width: 100vw;
  max-height: 100vh;
  object-fit: cover;
}
.my-swipe img,
.my-swipe video {
  width: 100%;
  height: 2rem;
}
.van-swipe {
  width: 100%;
}
.my-swipe .mask {
  width: 100%;
  height: 2rem;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}

.van-dialog {
  background: none;
  border-radius: 0;
}
.preview video {
  width: 100%;
  min-height: 2rem;
}
</style>